import { createVNode } from "vue";
import { SidebarItem } from "@chulei-ui/components";
import { itemIcons } from "./use-sidebar";
import type { RoutePath } from "@chulei-ui/components";
import type { FunctionalComponent } from "vue";

type SidebarItemsProps = {
  items: (RoutePath | [RoutePath, RoutePath[]])[];
};
const renderItem = (item: RoutePath | [RoutePath, RoutePath[]]) => {
  const realItem = Array.isArray(item) ? item[0] : item;
  const simpleRouter = realItem.meta?.simple!;
  const slots = {
    icon: () => {
      const icon = itemIcons[realItem.meta?.name!];
      return <div>{createVNode(icon)}</div>;
    },
    ...(Array.isArray(item)
      ? {
          default: () => {
            return item[1].map((subItem) => renderItem(subItem)).filter((i) => i);
          },
        }
      : {}),
  };
  return <SidebarItem v-slots={slots} route={simpleRouter} />;
};
export const SidebarItems: FunctionalComponent<SidebarItemsProps> = ({ items }) => {
  return items.map((item) => renderItem(item)).filter((i) => i);
};
